<template>
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" @click-right="onClickRight" style="color: #000">
      <template #right>
        <van-icon style="color: #000" name="ellipsis" />
      </template>
    </van-nav-bar>
    <div v-if="flag5">
      <div v-show="flag4"
        style="display: flex; justify-content: space-between;border-top: 10px solid #EEE;border-bottom: 10px solid #EEE;color: #1a1a1a;">
        <!-- <span style="margin-left: 3vw;">地址</span> -->
        <van-cell @click="showPopup">{{ txt }}</van-cell>
        <!-- 图标位置 -->
        <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
          <div class="kongbai" style="height:50px"></div>
          <div class="dizhi" @click="change(v)" style="height:50px;line-height: 50px; display:flex;align-items: center;"
            v-for="(v, index) in list" :key="index">
            <!-- <button style="border:none;border-radius:50%;width:30px;height:30px;line-height: 30px;"></button> -->
            <van-icon name="checked" size="25" color="red"/>
            {{ v.province }}{{ v.city }}{{ v.county }}{{ v.addressDetail }}
          </div>
        </van-popup>



        <span style="margin-right: 3vw;font-size: 14px;width: 75px;line-height: 42px;" @click="compile">编辑商品</span>
      </div>
      <div v-show="!flag4" style="display: flex; justify-content: flex-end">
        <span style="margin-right: 3vw" @click="compile">完成</span>
      </div>
    </div>

    <!-- 未登录时显示的登录按钮 -->
    <div v-if="flag" style="
        position: relative;
        text-align: center;
        line-height: 60px;
        width: 100vw;
      ">
      登录后可同步账户购物车中的商品
      <van-button @click="login" style="
          position: absolute;
          top: 17px;
          background-color: red;
          border-color: red;
        " type="primary" :round="flag" size="small">登录</van-button>
    </div>
    <!-- 登录时购物车为空显示的去购物按钮 -->
    <div v-if="flag1" style="
        position: relative;
        text-align: center;
        line-height: 60px;
        width: 100vw;
      ">
      您的购物车空空如也
      <van-button @click="search" style="
          position: absolute;
          top: 17px;
          background-color: red;
          border-color: red;
        " type="primary" :round="flag" size="small">去购物吧</van-button>
    </div>
    <!-- 登录时购物车不为空显示的购物车数据 -->
    <van-checkbox-group v-model="result" v-show="flag2" ref="checkboxGroup">
      <div style="display: flex" v-for="(v, index) in shoppingCatList" :key="index">
        <van-checkbox :name="v.id" style="width: 10vw; margin-left: 3vw"></van-checkbox>
        <van-card style="width: 70%" :num="v.num" :price="v.price" :title="v.title" :thumb="v.thumb">
          <template #num>
            <!-- 修改购物车某个商品的数量 -->
            <van-stepper @change="modifyNumber(v.num, v.id)" v-model="v.num" theme="round" button-size="22"
              disable-input />
          </template>
        </van-card>
        <!-- 删除购物车中单个商品 -->
        <div @click="deletOne(v.id)" style="
            width: 5vw;
            height: 5vw;
            margin-top: 11vw;
            border-radius: 50%;
            border: 1.5px solid grey;
            color: grey;
            font-weight: 600;
            line-height: 5vw;
            text-align: center;
            margin-left: 5vw;
          ">
          —
        </div>
      </div>
    </van-checkbox-group>
    <div v-if="flag5" style="
        position: fixed;
        bottom: 13.3vw;
        background-color: #fff;
        opacity: 0.8;
        width: 100vw;
        height: 13.3vw;
        display: flex;
        justify-content: space-around;
      ">
      <van-checkbox checked-color="#ee0a24" v-model="checked1" @click="checkAll">全选</van-checkbox>
      <!-- 结算 -->
      <div v-show="flag4" style="height: 100%; line-height: 13.3vw; display: flex">
        总计：￥<span>{{ totalprice }}</span>.00
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-top: 0.7vw" round
          type="info">去结算({{ numberCasesC }})件</van-button>
      </div>
      <!-- 编辑 -->
      <div v-show="!flag4" style="height: 100%; line-height: 13.3vw; display: flex">
        <van-button style="
            margin: 2vw 2vw 0 2vw;
            background: #fff;
            color: #000;
            border: 1px solid #000;
          " round type="primary" size="small">移至收藏</van-button>
        <van-button @click="deletAll" style="
            margin: 2vw 2vw 0 2vw;
            background: #fff;
            color: #000;
            border: 1px solid #000;
          " round type="primary" size="small">删除</van-button>
      </div>
    </div>

    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">可能你还想要</van-divider>
    <MyWaterfall></MyWaterfall>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyFooter from "@/components/JH/homepage/MyFooter.vue";
import MyWaterfall from "@/components/JH/homepage/MyWaterfall.vue";
import axios from "axios";

export default {
  mounted() {

    //判断用户是否登录
    if (sessionStorage.getItem("token")) {
      //判断用户购物车是否为空
      axios({
        url: "http://localhost:3000/shopping",
        method: "get",
      }).then(
        (res) => {
          //当购物车不为空时,显示购物车数据组件
          if (res.data.length > 0) {
            this.flag2 = true;
            this.shoppingCatList = res.data;
            this.shoppingCatList.forEach((obj) => {
              this.totalprice += obj.num * obj.price;
              this.numberCasesC += obj.num;
            });
            this.flag4 = true;
            this.flag5 = true;
          } else {
            // 当购物车为空时，显示去购物组件
            this.flag1 = true;
            //隐藏地址与全选隐藏
            this.flag5 = false;
          }
          console.log();
        },
        (rej) => { }
      );
    } else {
      //未登录显示提示用户登录组件
      this.flag = true;
    }
    axios({             //渲染前发送请求，响应显示所有地址
      url: "http://localhost:3000/address",
      method: "get"
    }).then(res => {
      console.log(res.data)
      this.list = res.data
      res.data.forEach(element => {
        if (element.isDefault) {
          this.txt = element.province + element.city + element.county + element.addressDetail
          console.log(this.txt)
        } else {
          console.log(111)
        }

      })


    })
  },
  data() {

    return {
      txt: '',

      list: [

      ],
      show: false,
      //登录提示组件开关
      flag: false,
      //去购物组件开关
      flag1: false,
      //购物车数据组件开关
      flag2: false,
      //全选开关
      flag3: true,
      //编辑商品开关
      flag4: false,
      //地址与全选开关
      flag5: false,
      //复选框 存储着商品id
      result: [],
      //全选
      checked1: false,
      //购物车列表
      shoppingCatList: [],

      refresh: "",

      radio: "1",

      //总价p
      totalprice: 0,
      //总件
      numberCasesC: 0,
    };
  },
  components: {
    MyFooter,
    MyWaterfall,
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    //返回上个页面
    onClickLeft() {
      //   Toast('返回');
      this.$router.back();
    },
    // 跳转登陆页面
    login() {
      this.$router.push("/LoginPage");
    },
    onClickRight() { },
    //跳转至搜索页面
    search() {
      this.$router.push("/Searchs");
    },
    //根据商品删除单个商品
    deletOne(id) {
      console.log(id);
      axios({
        url: "http://localhost:3000/shopping/" + id,
        method: "delete",
      }).then(
        (res) => {
          //删除成功后清除shoppingCatList里的数据
          this.totalprice = 0;
          this.numberCasesC = 0;
          for (let i = 0; i < this.shoppingCatList.length; i++) {
            if (this.shoppingCatList[i].id == id) {
              this.shoppingCatList.splice(i, 1);
              this.shoppingCatList.forEach((obj) => {
                this.totalprice += obj.num * obj.price;
                this.numberCasesC += obj.num;
              });
              break;
            }
          }
          //当购物车清空时隐藏地址与全选
          if (this.shoppingCatList.length == 0) {
            this.flag5 = false;
            this.flag1 = true;
          }
        },
        (rej) => {
          console.log(rej);
        }
      );
    },
    //根据多个商品id删除
    deletAll() {
      console.log(this.result);
      //删除数据库数据
      for (let i = 0; i < this.result.length; i++) {
        axios({
          url: "http://localhost:3000/shopping/" + this.result[i],
          method: "DELETE",
        }).then(
          (res) => {
            console.log(111);
            console.log(res);
          },
          (rej) => {
            console.log(rej);
          }
        );
      }
      //删除data数据
      this.result; //存对象id的数组
      this.shoppingCatList; // 存对象的数组
      this.shoppingCatList = this.shoppingCatList.filter((obj) => {
        for (let i = 0; i < this.result.length; i++) {
          if (this.result[i] == obj.id) return false;
        }
        return true;
      });
      //当购物车清空时隐藏地址与全选
      if (this.shoppingCatList.length == 0) {
        this.flag5 = false;
        this.flag1 = true;
      }

    },
    //修改购物车某个商品的数量
    modifyNumber(num, id) {
      axios({
        url: "http://localhost:3000/shopping/" + id,
        method: "patch",
        data: {
          num: num,
        },
      }).then(
        (res) => {
          console.log(res);
          this.shoppingCatList.forEach((obj) => {
            if (obj.id == id) {
              obj.num = num;
              this.totalprice = 0;
              this.numberCasesC = 0;
              this.shoppingCatList.forEach((obj) => {
                this.totalprice += obj.num * obj.price;
                this.numberCasesC += obj.num;
              });
            }
          });
        },
        (rej) => {
          console.log(rej);
        }
      );
    },

    //全选
    checkAll() {
      if (this.flag3) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
      this.flag3 = !this.flag3;
    },
    //编辑/完成显示隐藏
    compile() {
      this.flag4 = !this.flag4;
    },
    //切换地址
    change(obj){
      this.txt = obj.province + obj.city + obj.county + obj.addressDetail;
      this.show = false; 
    }
  },
};
</script>

<style lang="scss" scoped>

</style>